/* 引入全局css变量 */
@import "./variable.css";
@import "./theme/white.scss";
@import "./devui.scss";
// @import './fonts/index.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

// 基础CSS
html,
body {
  -webkit-font-smoothing: antialiased;
  // scorll 事件失效 overflow-y: overlay
}
html body {
  // background-color: $devui-global-bg;
  font-size: var(--text-sm);
  color: var(--color-font);
  // font-family: '-apple-system', 'Noto Sans SC', Tofu, 'SFMono-Regular', SFMono, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}
input::placeholder,
textarea::placeholder {
  color: var(--color-lighter);
}

/* 滚动条样式自定义 */
body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
body::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: var(--devui-disabled-text);
  &:hover {
    background-color: var(--devui-placeholder);
  }
}
body::-webkit-scrollbar-track {
  background: transparent;
}
body::-webkit-scrollbar-corner {
  background: transparent;
}
// 解决滚动条占用内容宽度
// html {
//   overflow-y: scroll;
// }

// :root {
//   overflow-y: auto;
//   overflow-x: hidden;
// }

// :root body {
//   position: absolute;
// }

// body {
//   width: 100vw;
//   overflow: hidden;
// }

// 兼容火狐浏览器
:focus-visible {
  outline: none;
}

// 自定义class
.g-border {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  &-light {
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius);
  }
}
.g-card,
.g-content-card {
  border: 1px solid var(--gray-border-color);
  border-radius: var(--border-radius);
}
.g-border-bottom {
  border-bottom: solid 1px var(--devui-line);
}
.g-icon-pointer {
  cursor: pointer;
  &:hover {
    color: var(--color-link) !important;
  }
}
.g-border-radius-top-no {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.g-icon-right {
  vertical-align: middle;
  margin-right: 4px;
}
.g-icon-left {
  vertical-align: middle;
  margin-left: 8px;
}
.g-drop-menu {
  width: 100px;
  padding: 0 16px;
}
.g-mid-line {
  width: 0.5px;
  height: 16px;
  background: var(--color-border-light);
}
.g-row-line {
  height: 1px;
  width: 100%;
  background: var(--color-G300);
}
.g-max-width {
  width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.g-font-bold {
  font-weight: 500;
}
.g-label-font {
  .devui-form__label {
    font-weight: 600 !important;
  }
}
/* 滚动条样式自定义 */
body::-webkit-scrollbar {
  width: 6px;
  height: 1px;
}
body::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background-color: var(--color-CG500);
}
body::-webkit-scrollbar-track {
  background: var(--color-CG150);
}

.clearfix {
  &:after {
    content: "";
    clear: both;
    visibility: hidden;
    display: block;
  }
}

.space-y-20 > *:not(:last-child) {
  margin-bottom: 20px;
}

/* 分隔符 | */
.g-delimiter {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--color-G300);
  vertical-align: middle;
}
.g-input-border {
  .devui-input__wrapper:not(.devui-input--focus) {
    border-color: var(--devui-line, #d7d8da);
  }
  .devui-input-slot__prepend,
  .devui-input-slot__append {
    border-color: var(--devui-line, #d7d8da);
  }
}
/* 输入框 去掉hover效果*/
.devui-input__wrapper:not(.devui-input--error):not(.devui-input--disabled):not(
    .devui-input--focus
  ):hover {
  border-color: var(--devui-line, #d7d8da);
}

/* 多行文本输入框 去掉hover效果*/
.devui-textarea:not(.devui-textarea--error):not(.devui-textarea--disabled):not(
    .devui-textarea--focus
  ):hover {
  border-color: var(--devui-line, #d7d8da);
}

/* 自动补全输入框 去掉hover效果*/
.devui-auto-complete-input__wrapper:not(.devui-auto-complete--disabled):not(
    .devui-auto-complete-input__wrapper--error
  ):hover {
  border-color: var(--devui-line, #d7d8da);
}

/* 可输入下拉选择框 去掉hover效果*/
.devui-editable-select-input__wrapper:not(
    .devui-editable-select-input__wrapper--disabled
  ):not(.devui-editable-select-input__wrapper--focus):hover {
  border-color: var(--devui-line, #d7d8da);
}

/* 分页 去掉hover效果*/
.devui-pagination .devui-pagination__size:hover {
  border-color: var(--devui-line, #d7d8da);
}

/* 数字输入框 去掉hover效果*/
.devui-input-number:hover .devui-input-number__control-buttons:not(.disabled) {
  border-color: var(--devui-line, #d7d8da);
}
.devui-input-number:hover .devui-input-number__input-box:not(.disabled) {
  border: 1px solid var(--devui-line, #9b9fa8);
}

/* 下拉框 去掉hover效果*/
.devui-select__selection:hover {
  border-color: var(--devui-line, #d7d8da);
}

/* 时间范围选择 去掉hover效果 */
.devui-range-date-picker-pro
  .devui-range-date-picker-pro__range-picker:not(
    .devui-range-date-picker-pro--error
  ):not(.devui-range-date-picker-pro--disabled):hover {
  border-color: var(--devui-line, #d7d8da);
}

.g-add-border {
  border-color: var(--devui-line, #d7d8da);
}
.g-z-index-9 {
  z-index: 9 !important;
}
.g-hidden-scrollbar {
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
  -ms-overflow-style: none;
  &::-webkit-scrollbar {
    display: none;
  }
  &::-webkit-scrollbar-horizontal {
    display: none;
  }
}
.g-discussion-item .dp-md-container .dp-md-content-container {
  min-height: 150px;
}
// modal相关
.g-modal-footer {
  display: flex;
  padding: 20px;
  gap: 8px;
  justify-content: flex-end;
}
.row-reverse {
  display: flex;
  justify-content: flex-start;
  flex-direction: row-reverse;
}

.ellipsis {
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ellipsis-pre {
  white-space: pre-line;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ellipsis-two-line {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ellipsis-three-line {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.absolute-full {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.inline-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
// 重置a标签的默认和hover色值
.reset-hover {
  color: unset;
  &:hover {
    color: unset;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 2s linear infinite;
  transform-origin: center center;
}

// 重写RadioGroup样式
.g-radio-group {
  &.devui-radio-group {
    background-color: var(--color-G100);
    padding: 2px;
    .devui-radio-button {
      border: none;
      line-height: 22px;
      height: 28px;
      color: var(--color-CG600);
      &:first-child {
        border-left: none !important;
      }
      &.active {
        color: #fff;
        box-shadow: 0px 2px 6px 0px rgba(37, 43, 58, 0.12);
        border-radius: var(--border-radius);
        font-weight: 500;
      }
    }
  }
}
.border-none {
  border: none !important;
}

input {
  background-color: transparent !important;
  // appearance: none;

  &:-webkit-autofill,
  textarea:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-text-fill-color: inherit !important;
    background-color: transparent !important;
    background-image: none;
    transition: background-color 36000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间
  }
  &:-moz-autofill,
  textarea:-moz-autofill,
  select:-moz-autofill {
    -webkit-text-fill-color: inherit !important;
    background-color: transparent !important;
    background-image: none;
    transition: background-color 36000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间
  }
}

@media screen and (max-width: 1536px) {
  .g-padding-x {
    padding: 0 32px;
  }
}

@media screen and (max-width: 768px) {
  .g-padding-x {
    padding: 0 16px;
  }
}

.g-more {
  display: inline-flex;
  align-items: center;
  height: 34px;
  // TODO: 全局变量替换
  background: rgba(#191919, 0.05) !important;
  font-weight: 400;
  letter-spacing: 0px;
  color: #252b3a;
  padding: 0 16px;
  cursor: pointer;
  user-select: none;
  border-radius: $devui-border-radius;
  border: none !important;
  &-line {
    height: 24px;
    width: 1px;
    margin: 0 9px;
    background: #dbdbdb;
  }
  &-menu {
    &-item {
      cursor: pointer;
      margin: 4px;
      padding: 4px;
      border-radius: $devui-border-radius;
      &:hover {
        background: rgba(#191919, 0.05);
      }
      &__active {
        background: rgba(#191919, 0.1);
      }
    }
  }
}

.g-radio-button {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  box-sizing: border-box;
  height: 32px;
  padding: 0 16px;
  align-items: center;
  border-radius: 61px;
  border: 1px solid $devui-form-control-line-hover;
  color: $devui-text;
  font-size: 14px;
  letter-spacing: 0px;
  z-index: 1;
  &__active {
    color: $devui-danger;
    border: 1px solid $devui-danger;
  }
}

@media screen and (max-width: 768px) {
  .hidden-m {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .hidden-pc {
    display: none !important;
  }
}

/* udesk客服 */
// 防止低分辨率下，对话框被遮挡
#udesk_container #udesk_panel {
  max-height: 95vh;
}

